<template>
  <Head></Head>
  <div class="cart">
    <div class="cart-filter-bar">
      <div class="switch-cart">购物车（全部{{ tableData?.length }}）</div>
      <div>
        收货地址：
        <el-select
          v-model="defAdder"
          placeholder="请选择配送地址"
          style="width: 200px"
        >
          <el-option
            :label="address.address"
            :value="address.id"
            v-for="address in addressList"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div style="display: flex; justify-content: space-between; padding: 10px">
      <div style="margin-bottom: 10px">
        <el-input
          v-model="queryInfo.keywords"
          placeholder="输入关键词查询"
          style="width: 200px; margin-right: 10px"
        ></el-input>
        <el-button type="" @click="getShopCartList">查询</el-button>
      </div>
      <div class="cart-sum">
        <!-- <span>已选商品（不含运费）</span> -->
        <el-button type="danger" @click="onClearShopCart()">
          清空购物车
        </el-button>
      </div>
    </div>
    <div class="cart-main">
      <div class="cart-table-th">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="type" label="" width="80">
            <template #default="scope">
              <!-- <img
                alt=""
                style="width: 60px; height: 60px"
              /> -->
              <img
                :src="scope.row.goods.images[0].url"
                alt=""
                style="width: 60px; height: 60px"
              />
            </template>
          </el-table-column>
          <el-table-column prop="goods" label="商品信息" width="180">
            <template #default="scope">
              <span
                class="goods-title"
                style="cursor: pointer"
                @click="gotoDetail(scope.row)"
              >
                {{ scope.row.goods.goodsName }}
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="type" label="商品种类" width="100" />
          <el-table-column prop="money" label="单价" width="100">
            <template #default="scope">
              {{ scope.row.goods.price }}
            </template>
          </el-table-column>
          <el-table-column prop="buyNum" label="数量" width="220">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.buyNum"
                :min="1"
                @change="numChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="totalPrice" label="金额" width="160" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row.id)"
              >
                删除
              </el-button>
              <el-button size="small" @click="addOrder(scope.row)">
                立即购买
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <div style="margin-bottom: 15px">
          <div class="order-content"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Head from '../components/Head.vue'
import {
  getShopCart,
  deleteShopCart,
  createShopCart,
  clearShopCart
} from '../api/shopCar.js'
import { createOrder } from '../api/order.js'
import { adderList } from '../api/address.js'
export default {
  data() {
    return {
      userInfo: JSON.parse(window.localStorage.getItem('user_info')),
      tableData: [
        // {
        //   info: '优趣猫粮成猫幼猫10kg天然海洋鱼肉味小猫全价食品增肥大袋20斤装',
        //   type: '猫条',
        //   img_url:
        //     'https://gw.alicdn.com/imgextra/i3/199606933/O1CN01dn3pWX215MqlsBye8_!!199606933.jpg_110x10000Q75.jpg_.webp',
        //   money: '59.9',
        //   count: '1',
        //   total_money: '59.9',
        //   type: '深海鳕鱼味10kg',
        //   id: 1
        // },
        // {
      ],
      queryInfo: {
        pageNum: 1,
        pageSize: 20,
        keywords: ''
      },
      defAdder: '',
      addressList: []
    }
  },
  methods: {
    handleDelete(goodsId) {
      console.log(goodsId)
      deleteShopCart(goodsId).then((res) => {
        this.getShopCartList()
        ElMessage.success('删除成功！')
      })
    },
    numChange(row) {
      this.tableData.forEach((item) => {
        if (item.id === row.id) {
          item.buyNum = row.buyNum
          item.totalPrice = item.buyNum * item.goods.price
        }
      })
    },
    getShopCartList() {
      getShopCart(this.userInfo.id, this.queryInfo.keywords).then((res) => {
        this.tableData = res
      })
    },
    onClearShopCart() {
      clearShopCart(this.userInfo.id).then(() => {
        this.getShopCartList()
        this.tableData = []
        ElMessage.success('清空购物车成功')
      })
    },
    gotoDetail(row) {
      window.open(`#/goods/${row.goodsId}`)
    },
    addOrder(item) {
      createOrder({
        goodsId: item.id,
        // orderNum: this.num,
        userId: this.userInfo.id,
        goodsName: item.goods.goodsName,
        addressId: this.defAdder,
        status: '1',
        totalPrice: item.totalPrice,
        count: item.buyNum
      })
        .then((res) => {
          ElMessage.success('已生成订单！')
        })
        .then(() => {
          this.getShopCartList()
        })
    }
  },
  created() {
    this.getShopCartList()
    adderList(this.userInfo.id).then((res) => {
      this.addressList = res
      this.defAdder = res.filter((item) => item.isDef === 1)

      // this.defAdder = this.defAdder ? this.defAdder[0].id : res[0].id
      this.defAdder = res[0].id
    })
  }
}
</script>

<style lang="scss" scoped>
.cart {
  min-height: 400px;
  background-color: #ebe8eb;
  border-radius: 24px;
  overflow: hidden;
  width: 1100px;
  margin: 30px auto;
  background: #fff;
  border-radius: 24px;
  .cart-filter-bar {
    overflow: hidden;
    font-size: 12px;
    position: relative;
    height: 72px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .switch-cart {
      overflow: hidden;
      color: #000;
      font-size: 18px;
      font-weight: 600;
      height: 72px;
      line-height: 72px;
    }

    .cart-sum {
      position: absolute;
      right: 18px;
      top: 0;
      height: 72px;
      line-height: 72px;
      font-size: 14px;
    }
  }

  .cart-table-th {
    overflow: hidden;
    color: #3c3c3c;
    font-weight: 700;
  }

  .order-content {
    border: 1px solid #f5f5f5;
    background-color: #f5f5f5;
    border-radius: 18px;
    margin: 0 24px;
    overflow: hidden;
  }
  .goods-title {
    cursor: pointer;
  }
  .goods-title:hover {
    color: #ea5512;
  }
}
</style>
